<template>
    <div>
        <modal :show.sync="show" id="template-modal" :dialogCSS="{'width': '70%'}">
            <template slot="header">
                Reply Template
            </template>
            <template slot="body">
                <div>
                    <!-- Nav tabs -->
                    <ul class="nav customtab nav-tabs" role="tablist">
                        <li role="presentation" class="active"  @click="changeTemplate('zh')">
                            <a href="#china" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="true">
                                <!--<span class="visible-xs"><i class="ti-home"></i></span>-->
                                <span class="hidden-xs"> Chinese</span>
                            </a>
                        </li>
                        <li role="presentation">
                            <a href="#english" aria-controls="home" @click="changeTemplate('en')" role="tab" data-toggle="tab" aria-expanded="true">
                                <span class="hidden-xs"> English</span>
                            </a>
                        </li>
                        <li role="presentation">
                            <a href="#japan" @click="changeTemplate('jp')" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="true">
                                <span class="hidden-xs"> Japanese</span>
                            </a>
                        </li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content m-t-10">
                        <div role="tabpanel" class="tab-pane fade active in" id="china">
                            <span class="text-danger" style="font-size: 12px;">* Enter words that needs to be replaced by surround them with {}</span>
                            <tree v-if="templateData.zh" id="zh-reply-tree" :data="templateData.zh"
                                  @cancelModal="$emit('update:show', false)"
                                  @showModal="$emit('update:show', true)"
                                  @selected="getCurrentNode"
                                  @create="createTemplate"
                                  @delete="deleteTemplate"
                                  @update="updateTemplate"
                            >
                            </tree>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="english">
                            <tree v-if="templateData.en" id="en-reply-tree" :data="templateData.en"
                                  @cancelModal="$emit('update:show', false)"
                                  @showModal="$emit('update:show', true)"
                                  @selected="getCurrentNode"
                                  @create="createTemplate"
                                  @delete="deleteTemplate"
                                  @update="updateTemplate"
                            >
                            </tree>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="japan">
                            <tree v-if="templateData.jp" id="jp-reply-tree" :data="templateData.jp"
                                  @cancelModal="$emit('update:show', false)"
                                  @showModal="$emit('update:show', true)"
                                  @selected="getCurrentNode"
                                  @create="createTemplate"
                                  @delete="deleteTemplate"
                                  @update="updateTemplate"
                            >
                            </tree>
                        </div>
                    </div>
                </div>
            </template>
            <template slot="footer">
                <button type="button" class="btn btn-success waves-effect" @click="selectTemplate">Select</button>
                <button type="button" class="btn btn-default waves-effect" @click="$emit('update:show', false)">Close</button>
            </template>
        </modal>
    </div>
</template>

<script>
    import Modal from '@/components/widgets/Modal'
    import tree from '@/components/widgets/Tree'
    import ShowSync from '@/mixins/ShowSync'
    import swal from 'sweetalert'
    import {deleteModel, addModel, updateModel, searchModel} from '@/api/model'
    import {saveHotTemplate, deleteHotTemplate} from "@/cache";

    export default {
        name: "ReplyTemplate",
        components: {Modal, tree},
        mixins: [ShowSync],
        data() {
            return {
                language: 'zh',
                templateData: {
                    'zh': null,
                    'jp': null,
                    'en': null,
                },
            }
        },
        methods: {
            getCurrentNode(node) {
                this.currentNode = node
            },
            changeTemplate(lang) {
                this.language = lang
            },
            getReplyTemplate() {
                searchModel('MessageTemplate', {
                    page_size: 999999,
                    search_keys: {}
                }).then( res => {
                    if (res.data.list.length) {
                        let data = []
                        res.data.list.forEach(item => {
                            (data[item.lang] || (data[item.lang] = [])).push(item)
                        })
                        this.templateData = data
                    } else {
                        this.createTemplate({
                            id: '#' + this.language,
                            icon: 'fif fif-world',
                            original: {
                                parent: '#',
                                node_type: 'group',
                            },
                            text: this.language
                        })
                    }
                })
            },
            createTemplate(node) {
                let item = {
                    lang: this.language,
                    mid: node.id,
                    parent: node.original.parent,
                    node_type: node.original.node_type,
                    icon: node.icon,
                    text: node.text
                }
                addModel('MessageTemplate', item).then(res => {
                    this.getReplyTemplate(this.language)
                }).catch( e => {
                    this.getReplyTemplate(this.language)
                })
            },
            deleteTemplate(node) {
                if (node.original.pk) {
                    swal({
                        title: "Are you sure?",
                        text: "Remove this item",
                        icon: "warning",
                        dangerMode: true,
                        buttons: true,
                    }).then((willDelete) => {
                        if (willDelete) {
                            this.tableLoading = true
                            deleteModel('MessageTemplate', node.original.pk).then(res => {
                                this.tableLoading = false
                                swal("success", "", "success")
                                this.getReplyTemplate(this.language)
                                let hotTemplates = deleteHotTemplate(oldText)
                                this.$emit('set-hot-template', hotTemplates)
                            }).catch(e => {
                                this.tableLoading = false
                                this.getReplyTemplate(this.language)
                            })
                        }
                    })
                }
            },
            updateTemplate(node, oldText) {
                if (node.original.pk) {
                    updateModel('MessageTemplate', node.original.pk, {
                        'text': node.text
                    }).then(res => {
                        this.tableLoading = false
                        this.getReplyTemplate(this.language)

                        let hotTemplates = deleteHotTemplate(oldText)
                        this.$emit('set-hot-template', hotTemplates)
                    }).catch(e => {
                        this.getReplyTemplate(this.language)
                    })
                }
            },
            selectTemplate() {
                if (this.currentNode) {
                    if (this.currentNode.node.original.node_type === 'group') {
                        $.toast({
                            heading: '请选择模板',
                            position: 'top-right',
                            loaderBg: '#ff6849',
                            icon: 'error',
                        })
                    } else {
                        let content = this.currentNode.node.text
                        this.$emit('set-content', content)
                        let hotTemplates = saveHotTemplate(this.currentNode.node.text)
                        this.$emit('set-hot-template', hotTemplates)
                        this.$emit('update:show', false)
                    }
                } else {
                    $.toast({
                        heading: '请选择模板',
                        position: 'top-right',
                        loaderBg: '#ff6849',
                        icon: 'error',
                    })
                }
            },
        },
        watch: {
            show() {
                if (this.show) {
                    this.getReplyTemplate(this.language)
                }
            }
        }
    }
</script>

<style scoped>

</style>